<template>
  <div class="skill-card">
    <div class="skill-card__header">
      <ElIcon :size="48" class="skill-card__icon">
        <component :is="getIconComponent(category.icon)" />
      </ElIcon>
      <h3 class="skill-card__title">{{ category.category }}</h3>
    </div>
    
    <div class="skill-card__skills">
      <div
        v-for="skill in category.skills"
        :key="skill.name"
        class="skill-item"
      >
        <div class="skill-item__header">
          <span class="skill-item__name">{{ skill.name }}</span>
          <span class="skill-item__level">{{ skill.level }}%</span>
        </div>
        <ElProgress
          :percentage="skill.level"
          :stroke-width="8"
          :show-text="false"
          :color="progressColor"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  Cpu, 
  Monitor, 
  Tools, 
  Star,
  Setting,
  DataAnalysis
} from '@element-plus/icons-vue'

const props = defineProps({
  category: {
    type: Object,
    required: true
  }
})

// 进度条颜色
const progressColor = computed(() => {
  return [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 }
  ]
})

// 根据图标名称返回对应的组件
function getIconComponent(iconName) {
  const iconMap = {
    'mdi:code-tags': Cpu,
    'mdi:server': Monitor,
    'mdi:tools': Tools,
    'mdi:star': Star,
    'mdi:settings': Setting,
    'mdi:chart': DataAnalysis
  }
  return iconMap[iconName] || Cpu
}
</script>

<style lang="scss" scoped>
.skill-card {
  background: var(--bg-primary);
  border-radius: $radius-lg;
  padding: $spacing-xl;
  box-shadow: var(--shadow-md);
  @include transition(transform, box-shadow);
  height: 100%;
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
  }
  
  &__header {
    text-align: center;
    margin-bottom: $spacing-xl;
  }
  
  &__icon {
    color: $primary-color;
    margin-bottom: $spacing-md;
  }
  
  &__title {
    font-size: $font-size-2xl;
    color: var(--text-primary);
    margin: 0;
  }
  
  &__skills {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
  }
}

.skill-item {
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-sm;
  }
  
  &__name {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: var(--text-primary);
  }
  
  &__level {
    font-size: $font-size-sm;
    color: var(--text-secondary);
    font-weight: $font-weight-semibold;
  }
}
</style>

